<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生成绩管理系统</title>
    <style>
        :root {
            --mint: #A8E6CF;
            --light-pink: #FDEDEC;
            --pink: #FFD3B6;
            --peach: #FFAAA5;
            --coral: #FF8B94;
            --lavender: #D4A5A5;
            --text: #5D5D5D;
            --light-gray: #F5F5F5;
        }
        
        body {
            font-family: 'Arial Rounded MT Bold', 'Arial', sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            line-height: 1.6;
            background-color: var(--light-pink);
            color: var(--text);
        }
        
        h1 {
            text-align: center;
            color: var(--coral);
            margin-bottom: 25px;
            font-size: 2.2em;
            text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
        }
        
        .add-student {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            margin-bottom: 25px;
            padding: 20px;
            background-color: white;
            border-radius: 15px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }
        
        .add-student input {
            padding: 10px 15px;
            border: 2px solid var(--mint);
            border-radius: 25px;
            font-size: 16px;
            outline: none;
            transition: all 0.3s;
        }
        
        .add-student input:focus {
            border-color: var(--coral);
            box-shadow: 0 0 5px var(--peach);
        }
        
        .form-group {
            display: flex;
            flex-direction: column;
            flex-grow: 1;
        }
        
        .error-message {
            color: var(--coral);
            font-size: 13px;
            height: 16px;
            margin-top: 5px;
            padding-left: 10px;
        }
        
        .sort-section {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-bottom: 20px;
        }
        
        .sort-controls {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 10px;
            margin-bottom: 10px;
        }
        
        .sort-status {
            font-size: 14px;
            color: var(--coral);
            font-weight: bold;
            margin-top: 5px;
            height: 20px;
        }
        
        button {
            padding: 10px 20px;
            border: none;
            border-radius: 25px;
            cursor: pointer;
            transition: all 0.3s;
            font-weight: bold;
            font-size: 15px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        
        #addStudentBtn {
            background-color: var(--mint);
            color: white;
            align-self: center;
        }
        
        #addStudentBtn:hover {
            background-color: #8fd8b6;
            transform: translateY(-2px);
        }
        
        .sort-controls button {
            background-color: var(--pink);
            color: white;
        }
        
        .sort-controls button:hover {
            background-color: #ffb685;
            transform: translateY(-2px);
        }
        
        .student-list {
            max-height: 500px;
            overflow-y: auto;
            border-radius: 15px;
            position: relative;
            background-color: white;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }
        
        .student-list-container {
            position: relative;
        }
        
        .student-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 20px;
            border-bottom: 1px solid var(--light-gray);
            cursor: pointer;
            height: 70px;
            box-sizing: border-box;
            transition: all 0.3s;
        }
        
        .student-item:hover {
            background-color: var(--light-pink);
            transform: scale(1.01);
        }
        
        .student-name {
            font-weight: bold;
            min-width: 100px;
            color: var(--coral);
            font-size: 17px;
        }
        
        .student-scores {
            display: flex;
            gap: 25px;
        }
        
        .student-scores span {
            background-color: var(--mint);
            padding: 5px 12px;
            border-radius: 15px;
            color: white;
            font-weight: bold;
        }
        
        .modal {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.5);
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 1000;
        }
        
        .modal-content {
            background-color: white;
            padding: 30px;
            border-radius: 20px;
            max-width: 500px;
            width: 90%;
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
            text-align: center;
        }
        
        .modal h2 {
            margin-top: 0;
            color: var(--coral);
            font-size: 24px;
            margin-bottom: 20px;
        }
        
        .modal p {
            font-size: 18px;
            margin: 15px 0;
            color: var(--text);
        }
        
        .delete-btn {
            background-color: var(--peach);
            color: white;
            padding: 8px 15px;
        }
        
        .delete-btn:hover {
            background-color: #ff7a72;
            transform: translateY(-2px);
        }
        
        #closeModalBtn {
            background-color: var(--lavender);
            color: white;
            margin-top: 20px;
            padding: 10px 25px;
        }
        
        #closeModalBtn:hover {
            background-color: #c28f8f;
        }
        
        /* 自定义滚动条 */
        .student-list::-webkit-scrollbar {
            width: 8px;
        }
        
        .student-list::-webkit-scrollbar-track {
            background: var(--light-pink);
            border-radius: 10px;
        }
        
        .student-list::-webkit-scrollbar-thumb {
            background: var(--pink);
            border-radius: 10px;
        }
        
        .student-list::-webkit-scrollbar-thumb:hover {
            background: var(--peach);
        }
        
        @media (max-width: 600px) {
            .add-student, .sort-controls {
                flex-direction: column;
            }
            
            .student-scores {
                flex-direction: column;
                gap: 8px;
                margin: 10px 0;
            }
            
            .student-item {
                flex-direction: column;
                height: auto;
                align-items: flex-start;
                gap: 12px;
                padding: 20px;
            }
            
            .student-name {
                margin-bottom: 5px;
            }
            
            .delete-btn {
                align-self: flex-end;
            }
        }
    </style>
</head>
<body>
    <h1>🎓 学生成绩管理系统</h1>
    
    <!-- 添加学生表单 -->
    <div class="add-student">
        <div class="form-group">
            <input type="text" id="studentName" placeholder="学生姓名">
            <div class="error-message" id="nameError"></div>
        </div>
        <div class="form-group">
            <input type="number" id="mathScore" placeholder="数学成绩">
            <div class="error-message" id="mathError"></div>
        </div>
        <div class="form-group">
            <input type="number" id="englishScore" placeholder="英语成绩">
            <div class="error-message" id="englishError"></div>
        </div>
        <button id="addStudentBtn">➕ 添加学生</button>
    </div>
    
    <!-- 排序控制 -->
    <div class="sort-section">
        <div class="sort-controls">
            <button id="sortByName">📛 按姓名排序</button>
            <button id="sortByMath">➕ 按数学成绩排序</button>
            <button id="sortByEnglish">🔤 按英语成绩排序</button>
            <button id="sortByAverage">📊 按平均分排序</button>
        </div>
        <div class="sort-status" id="sortStatus">
            <!-- 排序状态将在这里显示 -->
        </div>
    </div>
    
    <!-- 学生列表 -->
    <div class="student-list" id="studentList">
        <div class="student-list-container" id="studentListContainer">
            <!-- 学生项将通过JavaScript动态生成 -->
        </div>
    </div>
    
    <!-- 学生详情弹窗 -->
    <div class="modal" id="studentModal">
        <div class="modal-content">
            <h2 id="modalTitle">🎓 学生详情</h2>
            <p id="modalMathScore">📐 数学成绩: </p>
            <p id="modalEnglishScore">🔤 英语成绩: </p>
            <p id="modalAverageScore">📊 平均分: </p>
            <button id="closeModalBtn">关闭</button>
        </div>
    </div>
    
    <script>
        // 初始学生数据
        let students = [
            { id: 1, name: "张三", math: 90, english: 85 },
            { id: 2, name: "李四", math: 78, english: 92 },
            { id: 3, name: "王五", math: 88, english: 76 },
            { id: 4, name: "赵六", math: 92, english: 88 },
            { id: 5, name: "钱七", math: 85, english: 90 },
            { id: 6, name: "孙八", math: 76, english: 82 },
            { id: 7, name: "周九", math: 95, english: 87 },
            { id: 8, name: "吴十", math: 81, english: 79 },
            { id: 9, name: "郑十一", math: 89, english: 93 },
            { id: 10, name: "王十二", math: 77, english: 84 },
            { id: 11, name: "李十三", math: 83, english: 91 },
            { id: 12, name: "张十四", math: 94, english: 86 },
            { id: 13, name: "刘十五", math: 80, english: 78 },
            { id: 14, name: "陈十六", math: 87, english: 89 },
            { id: 15, name: "杨十七", math: 91, english: 85 },
            { id: 16, name: "黄十八", math: 79, english: 92 },
            { id: 17, name: "赵十九", math: 86, english: 80 },
            { id: 18, name: "吴二十", math: 93, english: 88 }
        ];
        
        // 排序状态
        let sortField = 'id';
        let sortDirection = 1; // 1为升序，-1为降序
        
        // DOM元素
        const studentListContainer = document.getElementById('studentListContainer');
        const studentNameInput = document.getElementById('studentName');
        const mathScoreInput = document.getElementById('mathScore');
        const englishScoreInput = document.getElementById('englishScore');
        const addStudentBtn = document.getElementById('addStudentBtn');
        const nameError = document.getElementById('nameError');
        const mathError = document.getElementById('mathError');
        const englishError = document.getElementById('englishError');
        const studentModal = document.getElementById('studentModal');
        const closeModalBtn = document.getElementById('closeModalBtn');
        const modalTitle = document.getElementById('modalTitle');
        const modalMathScore = document.getElementById('modalMathScore');
        const modalEnglishScore = document.getElementById('modalEnglishScore');
        const modalAverageScore = document.getElementById('modalAverageScore');
        const sortStatus = document.getElementById('sortStatus');
        
        // 初始化
        document.addEventListener('DOMContentLoaded', function() {
            renderStudentList();
            
            // 添加事件监听器
            addStudentBtn.addEventListener('click', addStudent);
            closeModalBtn.addEventListener('click', closeModal);
            
            // 排序按钮
            document.getElementById('sortByName').addEventListener('click', () => sortBy('name'));
            document.getElementById('sortByMath').addEventListener('click', () => sortBy('math'));
            document.getElementById('sortByEnglish').addEventListener('click', () => sortBy('english'));
            document.getElementById('sortByAverage').addEventListener('click', () => sortBy('average'));
            
            // 虚拟滚动实现
            document.getElementById('studentList').addEventListener('scroll', handleScroll);
            
            // 初始化排序状态显示
            updateSortStatus();
        });
        
        // 计算平均分
        function calculateAverage(student) {
            return (student.math + student.english) / 2;
        }
        
        // 渲染学生列表
        function renderStudentList() {
            // 先排序
            const sortedStudents = [...students].sort((a, b) => {
                let valueA, valueB;
                
                if (sortField === 'average') {
                    valueA = calculateAverage(a);
                    valueB = calculateAverage(b);
                } else {
                    valueA = a[sortField];
                    valueB = b[sortField];
                }
                
                if (typeof valueA === 'string') {
                    return valueA.localeCompare(valueB) * sortDirection;
                } else {
                    return (valueA - valueB) * sortDirection;
                }
            });
            
            // 清空容器
            studentListContainer.innerHTML = '';
            
            // 渲染学生项
            sortedStudents.forEach(student => {
                const studentItem = document.createElement('div');
                studentItem.className = 'student-item';
                studentItem.dataset.id = student.id;
                
                const average = calculateAverage(student);
                
                studentItem.innerHTML = `
                    <div class="student-name">👤 ${student.name}</div>
                    <div class="student-scores">
                        <span>📐 ${student.math}</span>
                        <span>🔤 ${student.english}</span>
                        <span>📊 ${average.toFixed(1)}</span>
                    </div>
                    <button class="delete-btn" data-id="${student.id}">🗑️ 删除</button>
                `;
                
                studentListContainer.appendChild(studentItem);
                
                // 添加点击事件
                studentItem.addEventListener('click', function(e) {
                    if (e.target.classList.contains('delete-btn')) return;
                    showStudentDetails(student);
                });
                
                // 添加删除按钮事件
                const deleteBtn = studentItem.querySelector('.delete-btn');
                deleteBtn.addEventListener('click', function(e) {
                    e.stopPropagation();
                    removeStudent(student.id);
                });
            });
        }
        
        // 添加学生
        function addStudent() {
            // 验证表单
            if (!validateForm()) return;
            
            // 获取输入值
            const name = studentNameInput.value.trim();
            const math = parseInt(mathScoreInput.value) || 0;
            const english = parseInt(englishScoreInput.value) || 0;
            
            // 生成ID
            const id = students.length > 0 
                ? Math.max(...students.map(s => s.id)) + 1 
                : 1;
            
            // 添加新学生
            students.push({
                id,
                name,
                math,
                english
            });
            
            // 清空表单
            studentNameInput.value = '';
            mathScoreInput.value = '';
            englishScoreInput.value = '';
            
            // 重新渲染列表
            renderStudentList();
            
            // 滚动到底部
            document.getElementById('studentList').scrollTop = document.getElementById('studentList').scrollHeight;
        }
        
        // 删除学生
        function removeStudent(id) {
            if (confirm('确定要删除这个学生吗？')) {
                students = students.filter(student => student.id !== id);
                renderStudentList();
            }
        }
        
        // 显示学生详情
        function showStudentDetails(student) {
            const average = calculateAverage(student);
            
            modalTitle.textContent = `👤 ${student.name} 的详情`;
            modalMathScore.textContent = `📐 数学成绩: ${student.math}`;
            modalEnglishScore.textContent = `🔤 英语成绩: ${student.english}`;
            modalAverageScore.textContent = `📊 平均分: ${average.toFixed(1)}`;
            
            studentModal.style.display = 'flex';
        }
        
        // 关闭弹窗
        function closeModal() {
            studentModal.style.display = 'none';
        }
        
        // 排序
        function sortBy(field) {
            // 如果点击的是当前排序字段，则切换排序方向
            if (sortField === field) {
                sortDirection *= -1;
            } 
            // 如果点击的是新字段，则设置为升序
            else {
                sortField = field;
                sortDirection = 1;
            }
            
            updateSortStatus();
            renderStudentList();
        }
        
        // 更新排序状态显示
        function updateSortStatus() {
            const fieldNames = {
                'name': '姓名',
                'math': '数学成绩',
                'english': '英语成绩',
                'average': '平均分'
            };
            
            const directionText = sortDirection === 1 ? '升序 ↑' : '降序 ↓';
            sortStatus.textContent = `当前排序: ${fieldNames[sortField]} (${directionText})`;
            
            // 重置所有按钮样式
            document.querySelectorAll('.sort-controls button').forEach(btn => {
                btn.style.backgroundColor = 'var(--pink)';
            });
            
            // 高亮当前排序按钮
            const activeButton = document.getElementById(`sortBy${field.charAt(0).toUpperCase() + field.slice(1)}`);
            if (activeButton) {
                activeButton.style.backgroundColor = 'var(--peach)';
            }
        }
        
        // 表单验证
        function validateForm() {
            let isValid = true;
            
            // 重置错误信息
            nameError.textContent = '';
            mathError.textContent = '';
            englishError.textContent = '';
            
            // 验证姓名
            if (!studentNameInput.value.trim()) {
                nameError.textContent = '姓名不能为空';
                isValid = false;
            }
            
            // 验证数学成绩
            const mathScore = parseInt(mathScoreInput.value);
            if (isNaN(mathScore) || mathScore < 0 || mathScore > 100) {
                mathError.textContent = '数学成绩必须在0-100之间';
                isValid = false;
            }
            
            // 验证英语成绩
            const englishScore = parseInt(englishScoreInput.value);
            if (isNaN(englishScore) || englishScore < 0 || englishScore > 100) {
                englishError.textContent = '英语成绩必须在0-100之间';
                isValid = false;
            }
            
            return isValid;
        }
        
        // 虚拟滚动处理
        function handleScroll() {
            // 简单实现 - 实际项目中可以优化为真正的虚拟滚动
            // 这里只是演示，完整的虚拟滚动需要计算可见区域并只渲染可见项
            // 由于纯HTML/CSS实现复杂，这里保持简单实现
        }
    </script>
</body>
</html>